{% extends "cashflow/base.html" %}
{% load humanize %}

{% block addition_header %}
<style type="text/css"> 
#budget_progress_bar {
    clear: both;
    padding-top: 10px;
}

#progress_wrapper {
    float: left;
    border: solid 1px #333333;
    height: 20px;
    width: 100%;
    overflow: hidden;
    display : block;
}
div.budgetname {
    float: left;
    width: 50%;
}

div.budgetleft {
    float: right;
    width: 50%;
    text-align: right;
}

#progress_bar {
    height: 100%;
}
#today_bar {
    height: 100%;
    position: relative;
    top:-20px;
    text-align: right;
    border-right-style:solid;
    border-right-color:blue;
}

#progress_bar.ok {
    background-color: #88FF88;
}

#progress_bar.warning {
    background-color: #FFFF88;
}

#progress_bar.alert {
    background-color: #FF8888;
}
</style>
{% endblock %}

{% block nav %}
  {% include "cashflow/nav.html" %}
{% endblock %}


{% block toolbar %}
Budget
{% endblock %}


{% block content %}

<h2>Budgets</h2>

<a href="{% url budget-add %}">New Budget</a>
 
{% regroup budgets_summary  by account as accounts_list %}      
<h1>This Month's Usage ({{ today }} of {{ endday }})</h1>
{% for account in accounts_list %}
<div id="budget_progress_bar">
    <h2>{{ account.grouper }}</h2>
    {% for item in account.list %}
      <div class="budgetname">
        {{ item.category.get_type_display }} : {{ item.category }} 
        (<a href="{% url transaction-by-account-category item.account.id item.category.id %}">detail</a>)
      </div>
      <div class="budgetleft">{{ item.amount_use }} of {{ item.amount_estimate }} ({{ item.amount_left }} left)</div>
      <div id="progress_wrapper">
          <div id="progress_bar" class="{{ item.color_class }}" style="width:{{ item.progress_percent }}%;">&nbsp;</div>
          <div id="today_bar" style="width:{{ today_percent }}%;">&nbsp;</div>
      </div>      
      
    {% endfor %}
</div>
{% endfor %}

{% endblock %}